<template>
    <el-timeline>
        <el-timeline-item v-for="(item, index) in list" :key="index" color="#0162FF">
            <el-row :gutter="24">
                <el-col :xl="6" :lg="8" class="item">
                    <span class="label">时间：</span>
                    <span class="value">{{ item.date }}</span>
                </el-col>
                <el-col :xl="6" :lg="8" class="item progress">
                    <span class="label">进度：</span>
                    <span class="value">
                        <el-progress type="circle" color="#0162FF" :width="50" :percentage="item.progress" />
                    </span>
                </el-col>
                <el-col :xl="6" :lg="8" class="item">
                    <span class="label">状态：</span>
                    <span class="value">{{ item.statusName }}</span>
                </el-col>
                <el-col :xl="6" :lg="8" class="item">
                    <span class="label">对齐计划：</span>
                    <span class="value">{{ item.plan }}</span>
                </el-col>
                <el-col :span="24" class="item">
                    <span class="label">实施情况：</span>
                    <span>{{ item.implementation }}</span>
                </el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :xl="6" :lg="8" class="item">
                    <span class="label">已完成工程量：</span>
                    <span class="value">{{ item.completedAmount }} {{ unit }}</span>
                </el-col>
                <el-col :xl="6" :lg="8" class="item">
                    <span class="label">金额：</span>
                    <span class="value">{{ item.money }}元</span>
                </el-col>
            </el-row>
        </el-timeline-item>
    </el-timeline>
</template>

<script>
export default {
    name: 'ProjectList',
    props: {
        list: {
            type: Array,
            default: () => ([])
        },
        unit: {
            type: String,
            default: ''
        }
    },
}
</script>

<style lang="scss" scoped>
.progress {
    position: relative;
    .value {
        position: absolute;
        top: -14px;
        left: 70px;
    }
}

::v-deep {
    .el-timeline-item__tail {
        border-color: #0162FF;
    }
}
</style>
